/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是持仓列表详情页
 */
import React,{Component} from "react";
import {Icon, NavBar, Tabs, WhiteSpace, List, Button, Toast, Card, Badge} from "antd-mobile";
import "../../access/css/positionlist.css"
import TotalIncome from "./HoldingListDetail_Component/TotalIncome";
import IncomeRate from "./HoldingListDetail_Component/IncomeRate";
import {Link} from "react-router-dom";
import ProductIncome from "./HoldingListDetail_Component/ProductIncome";
import ProductTotalMoney from "./HoldingListDetail_Component/ProductTotalMoney";
import axios from "axios";
import {getCookieId} from "../Login/Component_Login/GetCookie";
import {URL} from "../../index";
const Item = List.Item;
const Brief = Item.Brief;
const tabs = [
    { title: '本组合收益率' },
    { title: '本组合收益金额情况' },
    //{ title: 'Third Tab' },
];
export default class HoldingListDetail extends Component{
    constructor(props) {
        super(props);
        const accountId=this.props.location.state.accountId
        this.state={
            accountId:accountId,//财富id
            positionList:[],//json表名
            comName:"",
            totalEarning:0,
            totalMoney:0,
            yesterdayEarning:0,
            comBaseId:null
        }
        this.loadData = this.loadData.bind(this)
        this.getComBaseId = this.getComBaseId.bind(this)
    }
    loadData(){
        axios({
            method:"GET",
            url:"http://39.101.141.248:9527/wealthAccount/showWealthAccountList",
            params:{wealthAccountId:this.state.accountId,userId:getCookieId()}//this.props.userId,this.props.tradeId
        }).then(res=>{
            this.setState({
                positionList:res.data.positionList,
                totalEarning:res.data.positionList[0]["totalEarning"],//累计收益
                comName:res.data.positionList[0]["comName"],//产品名
                totalMoney:res.data.positionList[0]["totalMoney"],//总金额
                yesterdayEarning:res.data.positionList[0]["yesterdayEarning"]//昨日收益
            })
            this.getComBaseId(res.data.positionList[0]["comName"])
        }).catch(error =>{
            console.log(error)
        })
    }

    getComBaseId(name){
        axios({
            method:"GET",
            url: URL + "/combinationBaseInfo/getComBaseIdByName",
            params: {
                comBaseName:name
            }
        }).then(res => {
            if (res.data.code === 200) {
                this.setState({
                    comBaseId:res.data.comBaseId
                })
            }else{
                console.log(res.data)
                console.log(this.state.comBaseName)
            }
        })
    }
    componentDidMount() {
        this.loadData()
    }

    render() {
        return (
            <div>
                {/*页面顶部*/}
                <div style={{position:"fixed",width:"100%",zIndex:999}}>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" style={{color:" #f8a83f"}} />}
                        onLeftClick={()=>this.props.history.push('/holdingList')}
                    >持仓详情</NavBar>
            </div>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <div>
                    <Card>
                        <Card.Header
                            title={this.state.comName}
                            thumb={ <Badge text="组合" hot style={{ marginLeft: 6 ,marginRight:6 }} />}
                        />
                        <Card.Body>
                            <p style={{fontSize:"1.5rem"}}>总金额（元）</p>
                            <h1 style={{marginTop:"0.5rem"}}>{this.state.totalMoney}</h1>
                            <div>
                                <div className="data3">
                                    <p style={{fontSize:"13px",color:"grey"}}>
                                        昨日收益
                                    </p>
                                    <p style={{fontSize:"20px",color:"#f8a83f"}}>{this.state.yesterdayEarning}</p>
                                </div>
                                <div className="data3">
                                    <p style={{fontSize:"13px",color:"grey",marginLeft: "5rem"}}>
                                        累计收益
                                    </p>
                                    <p style={{fontSize:"20px",color:"#f8a83f",marginLeft: "5rem"}}>{this.state.totalEarning}</p>
                                </div>
                            </div>
                        </Card.Body>
                    </Card>
                </div>
                <WhiteSpace/>
                {/*组合和组合成分产品可视化*/}
                <div >

                    <Tabs tabs={tabs} initialPage={1} animated={false} useOnPan={false}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px', backgroundColor: '#fff' }}>
                            <TotalIncome fatheraccountId={this.state.accountId}/>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px', backgroundColor: '#fff' }}>
                            <IncomeRate fatheraccountId={this.state.accountId}/>
                        </div>
                        {/*<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                            Content of third tab
                        </div>*/}
                    </Tabs>

                    <div>
                        <WhiteSpace />
                        <Card>
                            <Card.Header
                                title="组合成分产品收益金额情况"
                            />
                            <Card.Body>
                                <ProductIncome fatheraccountId={this.state.accountId}/>
                            </Card.Body>
                        </Card>
                        <WhiteSpace size="lg" />
                    </div>

                    <Card>
                        <Card.Header
                            title="成分产品日收益"

                        />
                        <Card.Body>
                           <ProductTotalMoney fatheraccountId={this.state.accountId}/>
                        </Card.Body>
                    </Card>
                    <WhiteSpace />
                    <WhiteSpace />

                    <Link to={{pathname:'/changeList',state:{accountId:this.state.accountId}}}>
                        <Item  arrow="horizontal">用户调仓记录</Item>
                    </Link>
                    <Item extra="表现良好，建议持续拥有" arrow="horizontal" onClick={() => {}}>基金诊断</Item>
                    <Item extra="现金分红" arrow="horizontal" onClick={() => {}}>分红方式</Item>

                    <WhiteSpace/>
                    <WhiteSpace/>

                    {/*底部*/}
                    <Link to={{pathname:"/buyIn",state:{comBaseId:this.state.comBaseId,comBaseName: this.state.comName,
                           /* conBaseStartMoney: obj.conBaseStartMoney,comBaseCate: obj.comBaseCate,
                            comBaseRiskLevel:obj.comBaseRiskLevel*/}}}>
                    <Button type="warning"  style={{width:"25%",float:"left",borderRadius:0}} >追加</Button>
                    </Link>
                    <Link to={{pathname:"/buyBack",state:{comBaseId:this.state.comBaseId,comBaseName:this.state.comName}}}>
                    <Button type="primary"  style={{width:"25%",float:"left",borderRadius:0}}>赎回</Button>
                    </Link>
                    <Link to={{pathname:"/changeRatio",state:{comBaseId:this.state.comBaseId,wealthAccountId:this.state.accountId,comBaseName:this.state.comName}}}>
                    <Button style={{width:"49%",float:"left",borderRadius:0,backgroundColor:"#f8a83f",color:"white"}}>调整比例</Button>
                    </Link>
                    <WhiteSpace/>
                    <WhiteSpace/>
                    <WhiteSpace/>
                </div>
            </div>
        );
    }
}
